<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能家居</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="default" name="apple-mobile-web-app-status-bar-style"/>
    <link rel="apple-touch-icon-precomposed" sizes="any" href="img/apple-touch-icon/icon-72@2x.png"/>
    <link rel="stylesheet" type="text/css" href="css/operate.css"/>
</head>

<body class="responsive">

<script src="js/operate.js"></script>
<script src="js/layout.js"></script>
<script src="js/socket.js"></script>
<script src="js/cookie.js"></script>

<div class="status_bar responsive" layout="phone" >
    <div class="status_bar_content">
        <p class="info">用户: <span id="user_name">穿着裤子的云</span></p>
        <p class="exit" onclick="onClickExit(this)">退出</p>
        <p class="divider"></p>
        <p class="state">状态:<span id="user_state">在线</span></p>
    </div>
</div>

<div class="content">
    <div class="panel responsive" layout="phone">
        <div class="header responsive" layout="phone">
            <div class="family">
                <h5 id="family_name">员村凤梨苑</h5>
                <p  id="family_message" type="info">家庭</p>
            </div>
            <div class="member responsive"  layout="phone">
                <img class="exit_icon" src="img/exit.png" onclick="onClickExit(this)">
                <img class="member_icon" src="img/member/online.png" onclick="onClickConnect(this)">
            </div>
        </div>

        <div class="device_control">
            <p class="service_type">控制设备</p>

            <ul class="service_list">
                <li>
                    <div class="service_cell" dev="WSDMP161206001L" sev="bedroom-light-major" icon_t="light-major" state="offline" onclick="onClickCell(this)">
                        <img class="icon" src="img/light-major/offline.png">
                        <p class="description">
                            <span class="major">卧室</span>
                            <span class="minor">主灯</span>
                        </p>
                        <p class="state">离线</p>
                    </div>
                </li>
                <li>
                    <div class="service_cell" dev="WSDMP161206001L" sev="bedroom-light-minor" state="offline" icon_t="light-minor" onclick="onClickCell(this)">
                        <img  class="icon" src="img/light-minor/offline.png">
                        <p class="description">
                            <span class="major">卧室</span>
                            <span class="minor">次灯</span>
                        </p>
                        <p class="state">离线</p>
                    </div>
                </li>
                <li>
                    <div class="service_cell" dev="WSDMP161206001L" sev="bedroom-lamp-desk" state="offline" icon_t="desk-lamp" onclick="onClickCell(this)">
                        <img  class="icon" src="img/desk-lamp/offline.png">
                        <p class="description">
                            <span class="major">卧室</span>
                            <span class="minor">台灯</span>
                        </p>
                        <p class="state">离线</p>
                    </div>
                </li>
                <li>
                    <div class="service_cell" dev="WSDMP161206001L" sev="kitchen-light-major" state="offline" icon_t="light-major" onclick="onClickCell(this)">
                        <img  class="icon" src="img/light-major/offline.png">
                        <p class="description">
                            <span class="major">厨房</span>
                            <span class="minor">主灯</span>
                        </p>
                        <p class="state">离线</p>
                    </div>
                </li>
                <li>
                    <div class="service_cell" dev="WSDMP161206001L" sev="kitchen-fan-extractor" state="offline" icon_t="fan" onclick="onClickCell(this)">
                        <img  class="icon" src="img/fan/offline.png">
                        <p class="description">
                            <span class="major">厨房</span>
                            <span class="minor">排气扇</span>
                        </p>
                        <p class="state">离线</p>
                    </div>
                </li>
                <li>
                    <div class="service_cell" dev="WSDMP161206001L" sev="bath-water-heater" state="offline" icon_t="water-heater" onclick="onClickCell(this)">
                        <img  class="icon" src="img/water-heater/offline.png">
                        <p class="description">
                            <span class="major">浴室</span>
                            <span class="minor">热水器</span>
                        </p>
                        <p class="state">离线</p>
                    </div>
                </li>
            </ul>

            <p class="service_type">监控设备</p>
            <ul class="service_list">
                <li>
                    <div class="service_cell" dev="WSDMP161206001L" sev="temp-humd" state="offline" icon_t="temp">
                        <img  class="icon" src="img/temp/offline.png">
                        <p class="description">
                            <span class="major">卧室</span>
                            <span class="minor">温湿度计</span>
                        </p>
                        <p class="state">离线</p>
                    </div>
                </li>
                <li>
                    <div class="service_cell" state="offline">
                        <img  class="icon" src="img/camera/offline.png">
                        <p class="description">
                            <span class="major">正门</span>
                            <span class="minor">摄像头</span>
                        </p>
                        <p class="state">离线</p>
                    </div>
                </li>
            </ul>
        </div>

        <div class="trademark responsive" layout="phone">
            <img src="img/trademark.png">
        </div>

    </div>

</div>

</body>
</html>